.lg-fade {
	animation: lg-fadeIn 0.3s 0s forwards;
}

.lg-fade.act {
	z-index: 0;
	animation: lg-fadeOut 0.3s 0s forwards;
}

.lg-fade-right {
	animation: lg-fadeInRight 0.3s 0s forwards;
}

.lg-fade-right.act {
	z-index: 0;
	animation: lg-fadeOutRight 0.3s 0s forwards;
}

@keyframes lg-fadeIn {
	0% {
		opacity: 0;
		transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

@keyframes lg-fadeOut {
	0% {
		opacity: 1;
		transform: translateY(0);;
	}

	100% {
		opacity: 0;
		transform: translateY(-20px);
	}
}

@keyframes lg-fadeInRight {
	0% {
		opacity: 0;
		transform: translateX(200px);
	}

	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}

@keyframes lg-fadeOutRight {
	0% {
		opacity: 1;
		transform: translateX(0);
	}

	100% {
		opacity: 0;
		transform: translateX(200px);
	}
}

@keyframes lg-UpDown {
	0% {
		bottom: 0;
	}

	50% {
		bottom: 10px;
	}

	100% {
		bottom: 0;
	}
}


@keyframes lg-floatUpSlow {
	0% {
		transform: translateY(20px);
	}

	50% {
		transform: translateY(50px);
	}

	100% {
		transform: translateY(20px);
	}
}


@keyframes lg-floatLeftSlow {
	0% {
		transform: translateX(0px);
	}

	50% {
		transform: translateX(-20px);
	}

	100% {
		transform: translateX(0px);
	}
}


@keyframes lg-rotate {
	0% {
		transform:rotate(0deg)
	}

	100% {
		transform: rotate(360deg);
	}
}


@keyframes lg-rotate-1 {
	0% {
		transform:rotate(0deg)
	}

	100% {
		transform: rotate(180deg);
	}
}
@keyframes lg-rotate-2 {
	0% {
		transform:rotate(180deg)
	}

	100% {
		transform: rotate(360deg);
	}
}


@keyframes lg-hrl {
	0% {
		left: 0;
	}

	50% {
		left: 100%;
	}

	100% {
		left: 0;
	}
}

@keyframes lg-progress {
	0% {
		width: 0;
	}

	100% {
		width: 100%;
	}
}

@keyframes lg-rotateColor {
	0% {
		transform:rotate(0deg);
		color: #aab6c2;
	}
	20% {
		transform:rotate(72deg);
		color: #b4cfff;
	}
	40% {
		transform:rotate(144deg);
		color: #81aae8;
	}
	60% {
		transform:rotate(216deg);
		color: #3876c2;
	}
	80% {
		transform:rotate(288deg);
		color: #81aae8;
	}
	100% {
		transform: rotate(360deg);
		color: #aab6c2;
	}
}

@keyframes lg-scale {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	100% {
		transform: scale(20);
		opacity: 0;
	}
}
@keyframes lg-fadeInDown{
	0% {
		opacity: 0;
		transform: translateY(-200px);
	}
	
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}
@keyframes lg-fadeInUp{
	0% {
		opacity: 0;
		transform: translateY(200px);
	}
	
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}
@keyframes lg-fadeInRight{
	0% {
		opacity: 0;
		transform: translateX(200px);
	}
	
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}